<template>
	<!-- 回收员价格表 -->
	<view class="priceTable">
		<view class="left">
			<leftGroup :clableList="clableList" @clableMainhandle="handleChildEvent"></leftGroup>
		</view>
		<view class="right" :style="'height:'+recyclableHeight+'rpx;'">
			<view class="childrenList" v-for="(item,index) in clableMainList" :key="index">
				<view class="classimg">
					<image :src="item.pic_url" mode=""></image>
				</view>
				<view class="text">
					<view class="text-title">{{item.name}}/{{item.unit}}</view>
					<view class="nowNum">用户价：
						<text class="number">{{item.user_price}}</text>
					</view>
					<view class="nowNum">回收员价：
						<text class="number">{{item.collector_price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import leftGroup from "@/component/leftGroup.vue"
import util from "../../component/commen/api/util";
	export default {
		components:{
			leftGroup
		},
		data() {
			return {
				county:"",//所在的区/县
				clableList:[],
				clableMainList:[],//右侧数据
				recyclableHeight: 0, //滑块对应内容高度
			};
		},
		onLoad(e) {
			this.county = e.county
		},
		onShow() {
			this.getGroupList()
			this.getsystemInfo()
		},
		methods:{
			getGroupList(){
				var params = {
					do:"collector",
					op:"pricingList",
					county:this.county,//区/县
				}
				util.requestWithSign(params).then(res=>{
					console.log("列表数据：",res)
					this.clableList = res.data
					this.clableMainList = this.clableList[0].children
				})
			},
			handleChildEvent(value){
				console.log(value)
				this.clableMainList = value
			},
			getsystemInfo() { //获取当前屏幕信息
				// 设备系统信息
				let sysInfo = uni.getSystemInfoSync()
				// console.log(sysInfo)
				// 机型适配比例系数
				let scaleFactor = 750 / sysInfo.windowWidth
				// 当前机型屏幕高度
				let windowHeight = sysInfo.windowHeight * scaleFactor
				// 滑块对应内容高度=屏幕高度-底部tabbar高度:120rpx-头部图片：210rpx-顶部滑块：80rpx
				this.recyclableHeight = windowHeight
				// 当前机型屏幕宽度
				let windowWidth = sysInfo.windowWidth * scaleFactor
				// 状态栏高度
				let statusBarHeight = (sysInfo.statusBarHeight) * scaleFactor
				// 导航栏高度(ps:只针对微信小程序有效)
				// let navHeight = 0
				// 微信小程序头部胶囊信息
				// #ifdef MP-WEIXIN
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
				// 胶囊高度
				let menuButtonHeight = menuButtonInfo.height * scaleFactor
				// 胶囊宽度
				let menuButtonWidth = menuButtonInfo.width * scaleFactor
				// 胶囊上边界的坐标
				let menuButtonTop = menuButtonInfo.top * scaleFactor
				// 胶囊右边界的坐标
				let menuButtonRight = menuButtonInfo.right * scaleFactor
				// 胶囊下边界的坐标
				let menuButtonBottom = menuButtonInfo.bottom * scaleFactor
				// 胶囊左边界的坐标
				let menuButtonLeft = menuButtonInfo.left * scaleFactor
				// 微信小程序：导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
				// console.log(this.navHeight)
				// 
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
.priceTable{
	display:flex;
	.left{
		width: 25%;
		.recyclable-left {
			font-size: 27rpx;
			text-align: center;
			box-sizing: border-box;
			// padding-top: 2vh;
			width: 100%;
			height: 100%;
			padding-top: 20rpx;
		
			// border: 1px solid #000;
			.clable-text {
				padding: 20rpx 0;
				// border: 1px solid #f00;
			}
		
			.csreindex {
				//当前选中样式
				background: #fff;
				color: #4fc3a5;
			}
		}
	}
	.right {
			width: 75%;
			background: #fff;
			padding:0 20rpx;
			box-sizing: border-box;
			.childrenList {
				margin-top: 20rpx;					display: flex;
				width: 100%;
				align-items: center;
				// border: 1px solid #000;
				.classimg {
					width: 100rpx;
					height: 100rpx;
		
					image {
						width: 100%;
						height: 100%;
						border-radius: 50rpx;
					}
				}
		
				.text {
					margin-left: 20rpx;
					.text-title {
						// font-size: 28rpx;
						font-weight: bold;
					}
		
					.nowNum {
						color: #00b388;
						font-size: 24rpx;
						margin-top: 10rpx;
						// font-size: 26rpx;
						.number {
							font-weight: bold;
							// color: #00b388;
						}
					}
				}
		
				.outboundButton {
					width: 106rpx;
					height: 44rpx;
					border-radius: 34rpx;
					border: #eeeeef solid 2rpx;
					background-color: #f7f7f7;
					font-size: 24rpx;
					font-weight: 700;
					color: #00b388;
					margin-left: auto;
					text-align: center;
				}
			}
		
	}
}
</style>
